<template>
  <el-card shadow="never" style="max-height: 70vh; overflow: auto">
    <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
      <el-form-item label="id:" prop="id" v-show="false">
        <el-input v-model="form.id" disabled/>
      </el-form-item>
      <el-form-item label="所属用户:" prop="user_id">
        <SelectPage v-model="form.user_id" :url="'/admin/user/selectPage'" show_field="nickname" show_id="uid"
                    query_field="uid" :multiple="false"/>
      </el-form-item>
      <el-form-item label="宝宝名称:" prop="name">
        <el-input v-model="form.name" placeholder="请输入宝宝名称" clearable/>
      </el-form-item>
      <el-form-item label="头像:" prop="avatar">
        <ImageUpload v-model="form.avatar" :limit="1" />
      </el-form-item>
      <el-form-item label="性别:" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio v-for="(item, index) in gender" :key="index" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日:" prop="birthday">
        <el-date-picker v-model="form.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择生日"/>
      </el-form-item>
      <el-form-item label="胎数:" prop="which_baby">
        <el-input-number v-model="form.which_baby" :step="1" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="更新时间:" prop="update_time">
        <el-date-picker v-model="form.update_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择生日"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确认</el-button>
        <el-button type="warning" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {regionData} from 'element-china-area-data'

export default {
  name: 'EditForm',
  props: {
    findFormData: {
      type: Object,
      default: {}
    },
    editFormParams: {
      type: Object,
      default: {}
    },
    // 表单是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 编辑表单验证规则
      rules: {
        user_id: [{required: true, message: "请输入user_id", trigger: "blur"}],
        event_type: [{required: true, message: "请输入类型", trigger: "blur"}],
        is_default: [{required: true, message: "请输入是否默认", trigger: "blur"}],
        is_delete: [{required: true, message: "请输入是否已删除，1-已删除，2-未删除", trigger: "blur"}],

      },
      form: {},
      // 区域选择配置
      areaOptions: regionData,
      menses_aunt: [
        {label: "来了", value: 1},
        {label: "没来", value: 2},
      ],
      menses_roommate: [
        {label: "已同房", value: 1},
        {label: "未同房", value: 2},
      ],
      menses_roommate_type: [
        {label: "无措施", value: 1},
        {label: "避孕套", value: 2},
        {label: "避孕药", value: 3},
      ],
      gender: [
        {label: "男", value: 1},
        {label: "女", value: 2},
        {label: "双胞胎", value: 3},
      ],
    }
  },
  watch: {
    findFormData: {
      handler(nval) {
        if (JSON.stringify(nval) != '{}') {
          this.$nextTick(() => {
            this.form = nval
          })
        }
      },
      immediate: true,
      deep: false,
    },
  },
  methods: {
    // 取消按钮
    cancel() {
      this.$emit('editFormCancel')
    },
    submitForm() {
      this.$refs['form'].validate((valid, obj) => {
        if (valid) {
          this.$emit('submitForm', this.form)
        }
      })
    },
    // 表单重置
    reset() {
      this.resetForm('form')
    }
  }
}
</script>
